<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:fragment="common_head(title,links,scripts)">
  <title>网上图书商城</title>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
  <title th:replace="${title}">网上图书商城</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- 引入公共的第三方库 -->
  <link href="/libs/bootstrap-fonts/bootstrap-fonts.css" rel="stylesheet"/>
  <link href="/libs/bootstrap5/bootstrap.min.css" rel="stylesheet"/>
  <script type="text/javascript" src="/libs/bootstrap5/bootstrap.min.js"></script>

  <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>

  <!-- 引入公共的样式表和JS -->
  <link href="/styles/common/base.css" rel="stylesheet"/>
  <link href="/styles/common/variable.css" rel="stylesheet"/>
  <link href="/styles/common/mall-common.css" rel="stylesheet"/>
  <script src="/javascript/common/mall-common.js" type="text/javascript"></script>

  <!-- 引入界面中自定义的link 和script标签 -->
  <th:block th:replace="${links}"/>
  <th:block th:replace="${scripts}"/>
</head>
<body>
<div class="mall-header" th:fragment="mall-header">
  <div class="header-content">
    <img src="/images/logo.png" class="logo-img"/>
    <div class="menu-area">
      <a href="/"
         th:class="'menu-item menu-item-selected-' + (${#httpServletRequest.requestURI} == '/')">首页</a>
      <a href="/my-cart"
         th:class="'menu-item menu-item-selected-' + (${#httpServletRequest.requestURI} == '/my-cart')">我的购物车 </a>
      <a href="/my-order"
         th:class="'menu-item menu-item-selected-' + (${#httpServletRequest.requestURI} == '/my-order')">我的订单</a>
      <a href="/my-comments"
         th:class="'menu-item menu-item-selected-' + (${#httpServletRequest.requestURI} == '/my-comments')">评价</a>
    </div>
    <form class="input-group goods-search-bar" action="/search">
      <input type="text" class="form-control" placeholder="请输入要搜索的图书" name="keyword" th:value="${keyword}">
      <input type="text" class="form-control" placeholder="请输入要搜索的作者" name="keyword2" th:value="${keyword2}">
      <button class="btn btn-outline-secondary" type="submit" id="button-addon2">搜索</button>
    </form>
    <div class="user-area user-area-not-login" th:if="${session.USER_INFO} == null">
      <button th:onclick="location='/edge/register'" type="button" class="btn btn-outline-primary btn-sm register-btn">立即注册</button>
      <button th:onclick="location='/edge/login'" type="button" class="btn btn-outline-success btn-sm login-btn">登录</button>
    </div>
    <div class="user-area user-area-already-login" th:if="${session.USER_INFO} != null">
      <div class="dropdown">
        <div class="dropdown-toggle" type="button" data-bs-toggle="dropdown"
             aria-expanded="false">
          [[${session.USER_INFO.nickname}]]
        </div>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="/getAddressList">收货地址管理</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>

          <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#logoutConfirmModal"
                 href="/edge/logout">退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="modal fade" id="logoutConfirmModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5">退出登录</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          您确认要退出当前已经登录的用户吗？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button th:onclick="location='/edge/logout'" type="button" class="btn btn-danger logout-btn">退出登录</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="pager-container" th:fragment="common_pager(pageInfo)">
  <div class="page-info">共为您找到[[${pageInfo.total}]]条数据</div>
  <nav class="pager-body">
    <ul class="pagination justify-content-center">
      <li class="page-item" th:onclick="gotoPage([[${pageInfo.prePage}]])" th:if="${pageInfo.hasPreviousPage}">
        <a class="page-link">上一页</a>
      </li>
      <li th:class="${page == pageInfo.pageNum} ? 'page-item active' : 'page-item'"
          th:each="page : ${pageInfo.navigatepageNums}" th:onclick="gotoPage([[${page}]])">
        <a class="page-link">[[${page}]]</a>
      </li>
      <li class="page-item" th:if="${pageInfo.hasNextPage}" th:onclick="gotoPage([[${pageInfo.nextPage}]])">
        <a class="page-link">下一页</a>
      </li>
    </ul>
  </nav>
</div>
<div class="mall-footer" th:fragment="mall-footer">
  21008020201 蒋世杰<br>
  21008020204 王新瑞
</div>
</body>
</html>
